如何讓使用者學會使用你的應用(策略)

這是一個尋找最佳吐司的精品應用程式。下面是新手教程介面。

介紹Toast!這是首款智慧吐司食譜生成器。

你可以從精選的吐司食譜中選擇。

你可以看到朋友製作的精美吐司。

你甚至可以透過拍攝眼前的吐司生成食譜。

如何在Toasty中拍照的所有說明,特別是如何獲得最佳效果。

從照片中獲得配方。

但實際情況是使用者會習慣性的跳過這些介面。就算使用者有耐心閱讀每個介面,他們為什麼會記住所有內容呢?透過實踐學習比閱讀一堆指令更有趣且更有效。下面將介紹五個使你的應用程式更易發現的基本原則。

Prioritize important features 排列功能確保最重要的功能顯而易見

應用程式的核心部分應立即可見。非核心部分需要特殊的視覺引導和導航才能到達是可以的(第二步Provide visual cuesHint at gestures )。

A 將所有功能列出,並排列優先順序

當我們設計Toasty時,我們列出了應用程式所有重要功能的清單。這些功能很多,不可能全部放在一個螢幕上。

按重要性排列了一份功能清單。瀏覽吐司食譜和檢視我的食譜是人們非常需要看到的。“設定”和“關於我們”沒那麼重要,尤其是“關於我們”頁面。

B 使用者喜歡簡潔的介面,但最簡化的使用者介面可能並不實用或簡單,因為當我們隱藏功能讓應用看起來簡潔時,人們找不到功能的風險增加了。如何做到簡潔好用是一個平衡的藝術。

在使用者中測試介面時發現,當漢堡選單關閉時,人們不知道里面有什麼。這三條線並不能傳達裡面的功能,甚至可能忘記你最喜歡的功能存在。

採用導航系統底部它出現在應用程式的底部,讓人們可以快速在不同部分之間切換。人們立即看到應用程式中最重要的功能。

C 避免所有功能都同樣重要,全部都呈現出來。太多的選項會減少每個選項的可點選區域,並增加應用程式的複雜性,這會讓人們更難找到資訊。

D 從使用者角度思考,使用者最需要什麼?

人們最常做的事情是瀏覽各種吐司並收集一套食譜。我們將這些功能分成了兩個螢幕,命名為“為你推薦”和“食譜”,將他們放在最顯眼和最容易到達的導航欄。它使螢幕的人體工程學設計與預期的操作頻率一致。

瀏覽吐司食譜:檢視我的食譜

收集一套食譜:拍照是在我的食譜頁面中生成一個新的食譜。所以,我們在頂部放置了一個顯眼的按鈕,在其他食譜之前。

搜尋欄被放置在頂部,方便使用者看到。搜尋欄的位置稍微遠一些沒關係,因為相對於導航的操作來說使用頻率較低。

清單上的其他功能與我的個人偏好有關,我們把它們放在頂部的個人資料圖示中。偏好不會經常變化,所以多點選一次才能到達也沒關係。

Provide visual cuesHint at gestures 利用熟悉的視覺元素幫助使用者理解

在設計應用時要考慮人們已經具備的知識以及他們何時需要額外的幫助。

A Know your audience 瞭解你的觀眾

Toasty是一個面向大眾的應用,而不是專業工具。因此,使用者沒有太多時間和精力去學習這個應用程式。我們希望在使用者使用應用程式時提供儘可能多的視覺提示。

首先會去問自己使用者已經知道什麼了?

人們可以推斷出這個圖示與吐司有關,因為作為吐司愛好者,他們自然見過類似的麵包。

左箭頭是返回上一個螢幕的操作,人們熟悉這種互動,不需要新增額外的視覺提示。


B Guide with words and visuals 用文字和視覺引導

如果你正在構建使用者可能不熟悉的獨特設計或互動,應該寫文字或螢幕上的元素來幫助使用者理解,因為即使是常見的圖示也可能不明確。

比如一本書還是報紙,透過新增標籤來明確每個圖表的含義,瀏覽推薦的吐司種類、檢視儲存的食譜。

當我們新增文字標記按鈕“新建”時,我們明確了這個按鈕是用來拍攝吐司並新增新NEW食譜的。

空白頁問題:使用者雖然對搜尋圖示很熟悉,但會對應該輸入什麼感到困惑。可以透過提供各種選項資訊,如食材、地點或朋友進行搜尋。


C Use animation to teach in context 使用動畫在情境中教學

獨特的功能需要引導使用者操作,當相機處於正確的角度時,輪廓會發生視覺上的變化。然後,系統會透過觸覺反饋來指示拍攝吐司的推薦時刻。這些動畫和視覺提示幫助確保人們在相關時刻獲取我們的指示,而不是在引導過程中早早地出現。

Hint at gestures手勢可以提高導航的流暢性,但需要提示使用者如何使用

A Use familiar gestures 使用熟悉的系統預設手勢

儘量使用平臺上常見的手勢。包括觸控、滑動、長按、平移、捏合和旋轉。

如果你在發明新的手勢,儘量模仿現實生活中的互動方式。比如,用Apple Pencil在Scribble功能中,我們可以劃掉想刪除的文字。這和現實中的操作一樣,讓人感到熟悉。

在我的食譜應用中,我們用捏合手勢顯示更多食譜,就像照片應用中一樣。


B As shortcut, not replacement 作為快捷方式,而非替代

因為手勢再怎麼直觀也看不見。如果介面上看不出怎麼用手勢,那就把手勢當作輔助加速器。你還是要有一種清晰可見的主要操作方式。

在設計Toasty時,我們顯示了明確的“點贊”圖示用於觸控點贊,但也包括雙擊手勢作為快捷方式。


C Use animation to hint at gestures 使用動畫來提示手勢

我們可以點選吐司來檢視它的食譜。要返回所有食譜,我們使用下滑作為快捷方式。仍然保留了一個明確的返回按鈕,因為我們不能假定每個人都知道這個手勢。而且,手勢是有方向的。點選返回箭頭仍然會觸發向下滑動的動畫,這暗示你也可以下滑返回。確保你的過渡效果與相關手勢的動作一致。

我們希望使用者可以透過左右滑動來瀏覽食譜。但光看螢幕,使用者不知道可以這樣做。所以我們在兩側加上小吐司影象作為提示。

Organize by behavior 將內容分組以適應使用者的行為習慣

增強內容的可發現性。如果人們找不到他們想要的內容,那麼讓應用的功能易於理解是毫無意義的。

A Choose categories that fit people's motivations 選擇符合人們動機的類別

Toasty有成千上萬個食譜,蘋果設計師選擇將應用的內容按人們的動機和自然行為分類。在Toasty中,我們希望幫助人們探索和發現新的吐司食譜。

站在使用者角度思考,他們在現實生活中如何發現吐司?在什麼情境下?人們對吐司的行為是什麼?答案是在嘗試新餐館或朋友推薦時會發現新的吐司。所以分類方案是根據推薦來源是來自餐館還是朋友分享來組織推薦。

B Use personalization 使用個性化

但我們覺得還缺少一個能和個人口味及偏好相聯絡的強大類別。透過推薦引擎,可以動態地根據使用者喜好提供個性化內容,避免分類過於繁雜。所以新增了一個叫“美味精選”的類別。美味精選展示的是由我們的推薦引擎生成的最佳吐司食譜。

C Visualize organization 視覺化組織

清晰的視覺分割槽能夠幫助使用者快速理解和導航,提高內容的可發現性。透過將類別分組到不同的邏輯部分,並以標題分隔,感覺立刻變得更易理解。人們可以輕鬆忽略一個類別,而深入探索某一個特定部分。

Convey a sense of contro 確保使用者能控制個性化內容

為了提高可發現性,討論應向推薦引擎提供的反饋及標記操作。為做設計決策有信心,製作應用原型,展示給使用者,從反饋中學習,重複此過程,直到滿意為止。

A Let people provide explicit feedback 允許使用者給出明確的反饋

顯性的反饋來自使用者有意的輸入。

瀏覽數百個吐司後,人們進入美味吐司頁面。我們希望他們用心形按鈕表示喜歡。但大多數人認為這是“新增到收藏”,而不是“推薦更多這樣的吐司”。

iOS推薦反饋圖示使用“點贊”和“點踩”。朋友們仍然困惑,以為點贊表示他人會看到他們喜歡這個吐司,不明白這會改變他們的推薦引擎。

我們改用“建議類似的吐司”標籤,更明確推薦結果。現在,點選“少”按鈕後,未來的推薦會顯示更少的香蕉吐司。


B Disclose implicit feedback 公開隱式反饋

“隱性”意味著它在人們沒有主動要求時發生。

例如,當檢視食譜或與朋友分享吐司時。透過公開隱性輸入,我們告知人們系統推薦的輸入來源(因為你新增過牛油果吐司所以出現這個推薦結果),從而提高內容的可發現性和對系統的理解。

使用與顯性反饋相同的“點踩”圖示,展示按鈕效果相同,即顯示更多或更少內容。


C Give control over recommendations 給予對推薦內容的控制權

當使用者對於推薦結果不滿意時,該如何編輯個性化內容?

我們新增了更多功能讓使用者選擇,但使用者並不知道更多背後的功能,所以改為文字標籤說明“編輯推薦”讓使用者更簡單的去發現這個功能。並提供“少推薦牛油果吐司”和“停止推薦牛油果吐司”更具體的反饋。